<template>
    <el-card style="width: 600px;margin-left: 400px;" shadow="hover">

        <div class="inputbox">
            <input type="text" v-model="qrcode" style="width: 300px;height: 30px;">

            <button style="background-color: #18a689;width: 40px; height: 30px;color: aliceblue;border-style:none;"
                @click="query">查询</button>

            <button
                style="background-color: #18a689;width: 40px; height: 30px;color: aliceblue;border-style:none;">重置</button>
        </div>

        <el-form v-if="isShow" :model="form" label-width="auto" style="max-width: 450px" :rules="rules">


            <el-form-item label="昵称" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="能源币" prop="num">
                <el-input v-model="form.num" />
            </el-form-item>

            <el-form-item label="消费项目">
                <el-select v-model="form.region" placeholder="请选择项目">
                    <el-option label="保养" value="保养" />
                    <el-option label="洗车" value="洗车" />
                    <el-option label="换电池" value="换电池" />
                </el-select>
            </el-form-item>

            <el-form-item label="工单号" prop="workPhone">
                <el-input v-model="form.workPhone" />
            </el-form-item>

            <el-form-item label="车牌号" prop="cart">
                <el-input v-model="form.cart" />
            </el-form-item>

            <el-form-item label="车架号" prop="VIN">
                <el-input v-model="form.VIN" />
            </el-form-item>

            <el-form-item label="消费金额" prop="price">
                <el-input v-model="form.price" />
            </el-form-item>

            <el-form-item label="抵扣能量币" prop="EnergyCoins">
                <el-input v-model="form.EnergyCoins" />
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="margin-left: 213x;">提交</el-button>
            </el-form-item>
        </el-form>

    </el-card>



</template>

<script setup>
import { reactive, ref } from 'vue'
import instance from '../../utils/request'

const qrcode = ref('')
const isShow = ref(false)
const uid = ref('')

const form = reactive({
    name: '',
    num: '',
    region: '',
    workPhone: "",
    cart: "",
    VIN: "",
    price: "",
    EnergyCoins: 0,
    desc: '',
})

const rules = reactive({
    name: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 3, message: '昵称长度至少为3', trigger: 'blur' },
    ],
    num: [
        { required: true, message: '请输入能源币', trigger: 'blur' },
    ],
    workPhone: [
        { required: true, message: '请输入工单号', trigger: 'blur' },
    ],
    cart: [
        { required: true, message: '请输入车牌号', trigger: 'blur' },
    ],
    VIN: [
        { required: true, message: '请输入车架号', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '请输入消费金额', trigger: 'blur' },
    ],
    EnergyCoins: [
        { required: true, message: '请输入抵扣能源币', trigger: 'blur' },
    ],
})


//查询
const query = async () => {
    console.log(qrcode.value)
    let res = await instance.get('Seller/placeOrder', {
        params: {
            qrcod_code: qrcode.value,
        }
    })
    console.log(res.data);
    if (res.msg == '查询成功') {
        isShow.value = true
        form.name = res.data.nickname
        form.num = res.data.money
        uid.value = res.data.uid

    }


}


//提交
const onSubmit = async () => {
    console.log('submit!')
    let res = await instance.post('Seller/subOrder', 
        {
            uid: uid.value,
            work_number: form.workPhone,
            plate_number: form.cart,
            carframe_number: form.VIN,
            price: form.price,
            deduction: form.EnergyCoins,
            remark: form.desc,
            name: form.region
        
    })

    console.log(res);
}
</script>

<style>
.box {
    width: 400px;
    margin-left: 500px;
}

.inputbox {
    width: 400px;
    height: 45px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 81px;
}
</style>